<template>
  <div class="app-container">
    <!--  title-->
    <div class="tra_tile">
      <h3>当月生效资费订购</h3>
    </div>
    <br/>
    <!--  标题下操作-->
    <el-form :model="form" :rules="rules">
      <el-row>
        <el-col :span="6">
          <el-form-item>
        <span slot="label">
          资费选择
        </span>
            <el-select
              v-hasPermi="['yunze:cardFlow:queryPackageSimple']"
              v-model="form.packageCode"
              placeholder="请选择资费组"
              clearable
              filterable
              size="small"
              @change="connectPackage"
              style="width: 68%"
            >
              <el-option
                v-for="dict in traArr"
                :key="dict.package_id"
                :label="dict.package_agentname"
                :value="dict.package_id"
              />
            </el-select>
            <el-tooltip content="选择充值资费组 与 资费计划 进行充值" placement="right">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item>
        <span slot="label">
          资费计划
        </span>
            <el-select
              @change="connectPacket"
              v-model="form.packetCode"
              placeholder="请选择资费计划"
              clearable
              filterable
              size="small"
              style="width: 72%"
            >
              <el-option
                v-for="dict in newChArr"
                :key="dict.id"
                :label="dict.packet_wx_name"
                :value="dict.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item>
        <span slot="label">
          生效类型
        </span>
            <el-select
              v-model="form.takeEffectType"
              placeholder="请选择生效类型"
              clearable
              filterable
              size="small"
              @change="connectTacke"
              style="width: 72%"
            >
              <el-option
                v-for="dict in takeEffectType"
                :disabled="dict.dictValue !=='1'"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div>
        <label style="  padding-right: 20px;  font-size: 14px;    color: #606266;">操作类型</label>
        <el-switch
          @change="showBox"
          v-model="value1"
          active-text="上传文件"
          inactive-text="文本操作">
        </el-switch>
      </div>
      <br/>
      <div v-show="showInfo" v-loading="isLoading">
        <div  style="color:red;font-size: 14px" >提示：卡号之间以换行隔开</div>
        <br/>
        <el-input
          type="textarea"
          :rows="10"
          style="width: 22%"
          placeholder="请输入物联网卡号"
          v-model="form.iccid">
        </el-input>
        <div style="margin-left: 17%;" slot="footer" class="dialog-footer">
          <br/>
          <el-button type="primary" @click="subTextForm">确 定</el-button>
        </div>
      </div>
      <div v-show="showInfos">
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.otherUrl"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          :data="this.form"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            <el-link type="info" style="font-size:12px" @click="importChangeDate">下载模板</el-link>
          </div>
          <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
        </el-upload>
        <br/>
        <div style="margin-left: 17%;" slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import tools from "@/utils/yunze/tools";
import {
  listTariffGroup,
} from "@/api/yunze/flowcard/TariffGroup";
import {getToken} from "@/utils/auth";
import {postTraffic} from "@/api/yunze/traffic";
export default {
  data() {
    return {
      form: {},
      tarQueryParam: {
        pageSize: 10000,
        pageNum: 1
      },
      isLoading:false,
      showInfo:true,
      showInfos:false,
      value1:false,
      rules: {
        packageName: [
          {required: true, message: "请选择资费组", trigger: "blur"}
        ],
        packetName: [
          {required: true, message: "请选择资费计划", trigger: "blur"}
        ],
        takeEffectType: [
          {required: true, message: "请选择生效类型", trigger: "blur"}
        ],
      },
      updatel: {
        title: "",
        Number: false,
      },
      Pstr: {},
      // 导入参数
      upload: {
        Pstr: "",//携带参数
        // 是否显示弹出层（导入）
        open: false,
        Number: false,
        // 弹出层标题（导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: {Authorization: "Bearer " + getToken()},
        // 上传的地址
        otherUrl: process.env.VUE_APP_BASE_API + "/new/traffic/trafficImport"
      },
      takeEffectType: [],
      newChArr: [],
      packageId: undefined,
      traArr: [],
      tarChArr: []
    }
  },
  created() {
    this.getTariff();
    this.getDicts("yunze_card_takeEffect_type").then(response => {
      this.takeEffectType = response.data;
      // dictValue  dictLabel
    });
  },
  methods: {
    getTariff() {
      this.newChArr = [];
      let str = tools.encrypt(JSON.stringify(this.tarQueryParam));
      listTariffGroup(str).then(res => {
        let jsonobj = JSON.parse(tools.Decrypt(res));
        this.traArr = jsonobj.Data.Data;
        this.tarChArr = jsonobj.Data.PackeData;
      })
    },
    showBox(va){
      if (va==false){
        this.showInfo=true;
        this.showInfos=false

      }else if (va==true){
        this.showInfo=false;
        this.showInfos=true
      }
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.updatel.isUploading = true;
    },
    // 提交上传文件
    submitFileForm() {
      if (this.form.packageCode == undefined) {
        this.$message.error("请选择资费组")
      } else if (this.form.packetCode == undefined) {
        this.$message.error("请选择资费计划")
      } else if (this.form.takeEffectType == undefined) {
        this.$message.error("请选择生效类型")
      } else {
        this.submitFileFormBtn = false;
        this.$refs.upload.submit();
        this.updateOthers = false;
      }

    },
    subTextForm(){
      if (this.form.packageCode == undefined) {
        this.$message.error("请选择资费组")
      } else if (this.form.packetCode == undefined) {
        this.$message.error("请选择资费计划")
      } else if (this.form.takeEffectType == undefined) {
        this.$message.error("请选择生效类型")
      } else {
        this.isLoading = true;
        postTraffic(this.form).then(res=>{
          if (res.code=='200'){
            this.$message.success("订购成功 ！")
            this.isLoading = false;
          }else {
            this.$message.error("请检查文本格式后重新订购 ！")
            this.isLoading = false;
          }
        })
      }
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(response.msg, "导入结果", {dangerouslyUseHTMLString: true});
    },
    importChangeDate() {
      this.downloadConversion("/getcsv/importTrafficMonth.cvs");
    },
    downloadConversion(path) {
      let map = {};
      map.path = path;
      map.token = getToken();
      let Pwd_Str = tools.encrypt(JSON.stringify(map));
      //console.log(map);
      window.open(
        process.env.VUE_APP_BASE_API +
        "/yunze/ExecutionTask/downloadConversion?Pstr=" +
        Pwd_Str,
        "_blank"
      );
    },
    connectPackage(va) {
      this.newChArr=[]
      this.packageId = va;
      this.tarChArr.filter(res => {
        if (res.package_id.includes(this.packageId)) {
          this.newChArr.push(res)
        }
      })
    },
    connectPacket(lv) {
    },
    connectTacke(take) {
    }
  },
}
</script>
<style lang="scss">
.tra_tile {
  text-align: left;
}
</style>
